<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>患者信息查询</title>
    <style>
        * {
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: #f5f7fa;
            color: #333;
            font-size: 14px;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 15px;
        }

        .page-header {
            background-color: #f8f9fa;
            padding: 10px 15px;
            border: 1px solid #e3e8ee;
            border-radius: 4px 4px 0 0;
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 0;
        }

        .query-box {
            background-color: #fff;
            border: 1px solid #e3e8ee;
            border-top: none;
            border-radius: 0 0 4px 4px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .basic-query {
            padding-bottom: 15px;
        }

        .query-section-title {
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 5px;
            border-bottom: 1px solid #eee;
        }

        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }

        .form-group {
            flex: 0 0 25%;
            max-width: 25%;
            padding: 0 10px;
            margin-bottom: 10px;
        }

        .form-label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }

        .form-control {
            display: block;
            width: 100%;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 4px;
            transition: border-color 0.15s ease-in-out;
        }

        .form-control:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .range-inputs {
            display: flex;
            align-items: center;
        }

        .range-inputs input {
            width: calc(50% - 10px);
        }

        .range-separator {
            width: 20px;
            text-align: center;
        }

        .advanced-query {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .advanced-query-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 5px;
            border-bottom: 1px solid #eee;
        }

        .advanced-query-title {
            font-weight: bold;
        }

        .toggle-icon {
            color: #007bff;
            cursor: pointer;
        }

        .advanced-query-content {
            display: block;
        }

        .query-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
        }

        .btn {
            display: inline-block;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            user-select: none;
            border: 1px solid transparent;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.5;
            border-radius: 4px;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
            margin-left: 10px;
            cursor: pointer;
        }

        .btn-default {
            color: #212529;
            background-color: #f8f9fa;
            border-color: #ced4da;
        }

        .btn-primary {
            color: #fff;
            background-color: #007bff;
            border-color: #007bff;
        }

        .table-container {
            margin-top: 20px;
            background-color: #fff;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 0;
            border-collapse: collapse;
        }

        .table th,
        .table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e3e8ee;
        }

        .table th {
            background-color: #f8f9fa;
            font-weight: bold;
        }

        .table tbody tr:hover {
            background-color: #f5f7fa;
        }

        .sort-icon {
            margin-left: 5px;
            color: #aaa;
        }

        .sort-active {
            color: #007bff;
        }

        .action-btns .btn {
            padding: 2px 8px;
            font-size: 12px;
        }

        .action-btns .btn-view {
            color: #007bff;
            background-color: transparent;
            border-color: #007bff;
        }

        .action-btns .btn-delete {
            color: #dc3545;
            background-color: transparent;
            border-color: #dc3545;
        }

        .pagination-container {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
            align-items: center;
        }

        .pagination {
            display: flex;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .page-item {
            margin: 0 2px;
        }

        .page-link {
            position: relative;
            display: block;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.25;
            color: #007bff;
            background-color: #fff;
            border: 1px solid #dee2e6;
            text-decoration: none;
            cursor: pointer;
        }

        .page-item.active .page-link {
            z-index: 1;
            color: #fff;
            background-color: #007bff;
            border-color: #007bff;
        }

        .page-item.disabled .page-link {
            color: #6c757d;
            pointer-events: none;
            cursor: not-allowed;
            background-color: #fff;
            border-color: #dee2e6;
        }

        .page-item:first-child .page-link {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        .page-item:last-child .page-link {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        .diagnosis-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 5px;
        }

        .diagnosis-initial {
            background-color: #007bff;
        }

        .diagnosis-followup {
            background-color: #ffc107;
        }
    </style>
</head>
<body>
<div class="container">
    <h5 class="page-header">患者信息查询</h5>

    <div class="query-box">
        <div class="basic-query">
            <div class="query-section-title">基础信息查询</div>
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">姓名</label>
                    <input type="text" class="form-control" placeholder="请输入人姓名">
                </div>
                <div class="form-group">
                    <label class="form-label">年龄范围</label>
                    <div class="range-inputs">
                        <input type="text" class="form-control" placeholder="最小">
                        <span class="range-separator">-</span>
                        <input type="text" class="form-control" placeholder="最大">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">性别</label>
                    <div class="select-wrapper">
                        <select class="form-control">
                            <option selected>请选择</option>
                            <option>男</option>
                            <option>女</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">患者编号</label>
                    <input type="text" class="form-control" placeholder="请输入编号">
                </div>
            </div>
        </div>

        <div class="advanced-query">
            <div class="advanced-query-header">
                <div class="advanced-query-title">高级查询</div>
                <div class="toggle-icon">▼</div>
            </div>

            <div class="advanced-query-content">
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">检查信息</label>
                        <div class="form-subgroup">
                            <div class="form-label">CA72-4指标 (U/mL)</div>
                            <div class="range-inputs">
                                <input type="text" class="form-control" placeholder="最小值">
                                <span class="range-separator">-</span>
                                <input type="text" class="form-control" placeholder="最大值">
                            </div>
                        </div>
                        <div class="form-subgroup" style="margin-top: 15px;">
                            <div class="form-label">超敏C反应蛋白</div>
                            <input type="text" class="form-control" placeholder="请输入关键词">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">检验信息</label>
                        <div class="form-subgroup">
                            <div class="form-label">血尿酸浓度 (μmol/L)</div>
                            <div class="range-inputs">
                                <input type="text" class="form-control" placeholder="最小值">
                                <span class="range-separator">-</span>
                                <input type="text" class="form-control" placeholder="最大值">
                            </div>
                        </div>
                        <div class="form-subgroup" style="margin-top: 15px;">
                            <div class="form-label">胱抑素B (μmol/L)</div>
                            <div class="range-inputs">
                                <input type="text" class="form-control" placeholder="最小值">
                                <span class="range-separator">-</span>
                                <input type="text" class="form-control" placeholder="最大值">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">诊疗信息</label>
                        <div class="form-subgroup">
                            <div class="form-label">就诊时间</div>
                            <input type="text" class="form-control" placeholder="yyyy-MM-dd">
                        </div>
                        <div class="form-subgroup" style="margin-top: 15px;">
                            <div class="form-label">诊断类型</div>
                            <select class="form-control">
                                <option selected>请选择</option>
                                <option>初诊</option>
                                <option>复诊</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="query-actions">
            <button class="btn btn-default">重置</button>
            <button class="btn btn-primary">查询</button>
        </div>
    </div>

    <div class="table-container">
        <table class="table">
            <thead>
            <tr>
                <th>患者编号</th>
                <th>姓名</th>
                <th>身份证号</th>
                <th>手机号</th>
                <th>是否初诊 <span class="sort-icon">▼</span></th>
                <th>就诊时间 <span class="sort-icon sort-active">▼</span></th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>TrackCode 0</td>
                <td>护卫军</td>
                <td>123123123123737251234</td>
                <td>24232434</td>
                <td><span class="diagnosis-indicator diagnosis-initial"></span> 否</td>
                <td>2017-10-31 至 2017-11-31</td>
                <td class="action-btns">
                    <button class="btn btn-view">查看</button>
                    <button class="btn btn-delete">删除</button>
                </td>
            </tr>
            <tr>
                <td>TrackCode 1</td>
                <td>李艳梅</td>
                <td>123123123123737251234</td>
                <td>32323423</td>
                <td><span class="diagnosis-indicator diagnosis-followup"></span> 是</td>
                <td>2017-10-31 至 2017-11-31</td>
                <td class="action-btns">
                    <button class="btn btn-view">查看</button>
                    <button class="btn btn-delete">删除</button>
                </td>
            </tr>
            <tr>
                <td>TrackCode 2</td>
                <td>王德华</td>
                <td>123123123123737251234</td>
                <td>42342342</td>
                <td><span class="diagnosis-indicator diagnosis-followup"></span> 是</td>
                <td>2017-10-31 至 2017-11-31</td>
                <td class="action-btns">
                    <button class="btn btn-view">查看</button>
                    <button class="btn btn-delete">删除</button>
                </td>
            </tr>
            <tr>
                <td>TrackCode 3</td>
                <td>赵昌三</td>
                <td>42342312312312363242</td>
                <td>43242342</td>
                <td><span class="diagnosis-indicator diagnosis-initial"></span> 否</td>
                <td>2017-10-31 至 2017-11-31</td>
                <td class="action-btns">
                    <button class="btn btn-view">查看</button>
                    <button class="btn btn-delete">删除</button>
                </td>
            </tr>
            <tr>
                <td>TrackCode 4</td>
                <td>陈新基</td>
                <td>123123123123737251234</td>
                <td>43242424</td>
                <td><span class="diagnosis-indicator diagnosis-followup"></span> 是</td>
                <td>2017-10-31 至 2017-11-31</td>
                <td class="action-btns">
                    <button class="btn btn-view">查看</button>
                    <button class="btn btn-delete">删除</button>
                </td>
            </tr>
            <tr>
                <td>TrackCode 5</td>
                <td>吴三</td>
                <td>123123123123737251234</td>
                <td>42342342</td>
                <td><span class="diagnosis-indicator diagnosis-followup"></span> 是</td>
                <td>2017-10-31 至 2017-11-31</td>
                <td class="action-btns">
                    <button class="btn btn-view">查看</button>
                    <button class="btn btn-delete">删除</button>
                </td>
            </tr>
            <tr>
                <td>TrackCode 6</td>
                <td>史生生</td>
                <td>123123123123737251234</td>
                <td>42342343</td>
                <td><span class="diagnosis-indicator diagnosis-followup"></span> 是</td>
                <td>2017-10-31 至 2017-11-31</td>
                <td class="action-btns">
                    <button class="btn btn-view">查看</button>
                    <button class="btn btn-delete">删除</button>
                </td>
            </tr>
            <tr>
                <td>TrackCode 7</td>
                <td>安生</td>
                <td>123123123123737251234</td>
                <td>42342344</td>
                <td><span class="diagnosis-indicator diagnosis-followup"></span> 是</td>
                <td>2017-10-31 至 2017-11-31</td>
                <td class="action-btns">
                    <button class="btn btn-view">查看</button>
                    <button class="btn btn-delete">删除</button>
                </td>
            </tr>
            <tr>
                <td>TrackCode 8</td>
                <td>张保利</td>
                <td>123123123123737251234</td>
                <td>42342344</td>
                <td><span class="diagnosis-indicator diagnosis-followup"></span> 是</td>
                <td>2017-10-31 至 2017-11-31</td>
                <td class="action-btns">
                    <button class="btn btn-view">查看</button>
                    <button class="btn btn-delete">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="pagination-container">
        <ul class="pagination">
            <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1">&lt;</a>
            </li>
            <li class="page-item active">
                <a class="page-link" href="#">1</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">2</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">3</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">4</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">5</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">6</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">7</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">8</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">9</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">&gt;</a>
            </li>
        </ul>
    </div>
</div>
</body>
</html>
